<template>
  <div class="cell-btn xh-list">
    <search :auto-fixed="false"
            v-model="searchText"
            @on-submit="getResult" ></search>
    <group 
           class="group-main" v-for="(item,index) in getResult" :key="index">
      <cell 
      :link="{path:'/demos/my-contract-detail',query:{ContractGUID:item.ContractGUID}}"
      >
        <div slot="title"
             class="head">{{item.ContractName}}</div>
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc">签约日期:&nbsp;{{item.SignDate|formatDate}}</span>
        </div>
      </cell>
       <cell>
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc"><span class="form-title">结算进度：</span>&nbsp;{{item.TimeLine}}</span>
        </div>
      </cell>
       <cell v-show="item.FkjhName!==null">
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc"><span class="form-title">{{item.FkjhName}}</span>&nbsp;{{item.ApproveState}}</span>
        </div>
      </cell>
        <cell v-show="item.SubjectName!==null">
        <div slot="inline-desc"
             class="div-desc">
          <span class="cell-desc"><span class="form-title">{{item.SubjectName}}：</span>&nbsp;{{item.QuDefineName|formatPg}}</span>
        </div>
      </cell>
    </group>
  </div>
</template>

<script>
import { Search, Group, Cell } from 'vux'
import { MyContractService } from '../../service/Services.js'
import _ from 'lodash'

export default {
  name: 'CellBtn',
  components: {
    Search,
    Group,
    Cell
  },
  data () {
    return {
      searchText: '',
      pageData: []
    }
  },
  methods: {
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
      // let providerGUID = '8F923CE0-D0C7-E411-9456-00155D0A6F25'
      MyContractService.GetMyContract(providerGUID).then((res) => {
        this.$vux.loading.hide()
        this.pageData = res.Data
      })
    }
  },
  filters: {
    formatPg (value) {
      if (value === null) {
        return '正常'
      } else {
        return '异常'
      }
    }
  },
  computed: {
    getResult () {
      return _.filter(this.pageData, item => { return item.ContractName.indexOf(this.searchText) !== -1 })
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style scoped lang="less">

.cell-main {
  margin-top: 10px;
}

.cell-desc {
  display: block;
  margin: 5px 0px;
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.head {
  font-weight: bold;
  font-size: 19px;
  color: #111111;
}

.div-date {
  border-top: 0.5px dashed #E4E4E4;
  margin: 15px 0 0 0;
  padding-top: 10px;
  color: red;
}

.div-left {
  float: left;
}

.div-right {
  float: right;
}

.div-desc {
  color: #7F7F7F;
}

.date-red {
  color: red;
}

.date-gray {
  color: #C5C5C5;
}

.button-red {
  color: red;
  border: 1px solid red;
}

.button-gray {
  color: #C5C5C5;
  border: 1px solid #C5C5C5;
}

.button-init {
  background-color: white;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  padding: 0 12px;
  border-radius: 20px;
  display: inline-block;
}
.form-title{
  color: #222222;
}
</style>
